<!DOCTYPE html>
<html lang="en" class="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title> Flyme 账号 - 注册</title>
    <meta name="description" content="欢迎登录和注册 Flyme 账号，您可以体验手机云服务功能，包括：在线下载应用，同步手机数据和查找手机等，让您的手机管理更加智能。">
    <meta name="keywords" content="魅族 meizu 登录flyme 云服务 查找手机 充值账号 MX M9 MX2">
    <link href="/static/home/img/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
    <link href="/static/home/img/favicon.ico" rel="icon" type="image/x-icon">
    <!-- Bootstrap -->
    <link href="/static/home/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/static/home/js/jquery-1.12.4.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/static/home/js/bootstrap.min.js"></script>
    <!-- 兼任ie9以下 -->
    <!--[if lt IE 9]>
            <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
            <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!-- 自定义 -->
    <link rel="stylesheet" type="text/css" href="/static/home/css/global.css">
    <link rel="stylesheet" type="text/css" href="/static/home/css/register.css">
    <script type="text/javascript" src="/static/home/js/rem.js"></script>
    <script type="text/javascript" src="/static/home/js/topNav.js"></script>

</head>
<body>
  <!-- 导航 --> 
  <div class="layout-header hidden-xs hidden-sm" id="scroll-wrap">
    <nav class="navbar navbar-default header ">
      <div class="container clearfix">
          <div class="layout-header-logo navbar-left">
              <a target="_blank" href="./index.html" class="layout-header-logo-link" alt="魅族科技">
                <img src="/static/home/img/logo.png">
              </a>
          </div>      
      </div>
    </nav>
  </div><!-- 导航 E--> 

  <!-- 主内容区域 -->
  <div id="content" class="content">  
    <div class="container-fluid"> 
        <div class="banner-box hidden-xs hidden-sm">
            <div class="container"> 
                <form  method="post" id="mainForm" class="main-form">
                  {% csrf_token %}
                    <div class="tab-title">
                        <a class="linkABlue" id="toTelRegister" href="javascript:void(0)">注册 Flyme 账号</a>
                    </div>

                    <div class="tip-box" style="display: none">
                      <button type="button" style="display: none" class="close phone-error" data-dismiss="alert" aria-label="Close">
                          <i class="glyphicon glyphicon-exclamation-sign"></i>
                          <span class="tip-font">手机号不正确</span>
                          <span aria-hidden="true" class="cha">&times;</span>
                      </button>    
                      <button type="button" style="display: none" class="close password-error" data-dismiss="alert" aria-label="Close">
                          <i class="glyphicon glyphicon-exclamation-sign"></i>
                          <span class="tip-font">密码不正确</span>
                          <span aria-hidden="true" class="cha">&times;</span>
                      </button>
                      <button type="button" style="display: none" class="close vcode-error" data-dismiss="alert" aria-label="Close">
                          <i class="glyphicon glyphicon-exclamation-sign"></i>
                          <span class="tip-font">验证码</span>
                          <span aria-hidden="true" class="cha">&times;</span>
                      </button>

                    </div>
                    <div class="normalInput cycode-box fieldInput" id="cycode-box">
                        <div class="cycode-selectbox">
                            <input class="ipt-account inp-focus" name="phone" id="account" maxlength="50" placeholder="手机号" autocomplete="off">
                        </div>
                    </div>
                    <div class="normalInput fieldInput passwd-box">
                        <input class="inp-focus" name="password" id="password" maxlength="16" placeholder="密码" autocomplete="off" type="password">
                    </div>

                    <div class="normalInput vcode-box">
                        <input class="inp-focus" name="code" maxlength="16" placeholder="手机验证码" autocomplete="off" type="text">
                        <button class="btn"  type="button" style="position: absolute;top:5px;right:5px;">获取验证码</button>
                    </div>


                    <div id="flymeService" class="rememberField" style="font-size:12px;">
                        <label class="pointer" for="acceptFlyme" tabindex="0">点击立即注册，即表示您同意并愿意遵守</label>
                        <a href="/serviceAgreement" target="_blank" class="linkABlue">Flyme服务协议</a>
                        <label class="pointer">和</label>
                        <a href="#" target="_blank" class="linkABlue">法律声明</a>
                    </div>
                    <a id="nextStep" class="fullBtnBlue register-btn" data-step="1">立即注册</a>
                    <div class="transferField">
                        <a class="go2register linkABlue" href="#" id="toLogin">登录</a>
                    </div>
                </form>
            </div>
        </div>
     
    </div>
  </div>
  <!-- 主内容区域  E-->

  <!-- 底部区域 -->
  <div id="flymeFooter " class="footerWrap hidden-xs hidden-sm">
    <div class="container">
      <div class="footer-layer1">
        <div class="footer-innerLink">
          <a href="#" target="_blank" title="关于魅族">关于魅族</a>
          <img class="foot-line" src="/static/home/img/space.gif">
          <a href="#" target="_blank" title="工作机会">工作机会</a>
          <img class="foot-line" src="/static/home/img/space.gif">
          <a href="#" target="_blank" title="联系我们">联系我们</a>
          <img class="foot-line" src="/static/home/img/space.gif">
          <a href="#" target="_blank" title="法律声明">法律声明</a>
          <img class="foot-line" src="/static/home/img/space.gif">
          
          <div href="javascript:void(0);" id="globalName" class="footer-language" title="简体中文">
            简体中文&nbsp;&nbsp;&nbsp;
            <div id="globalContainer" class="footer-language_menu">
              <a href="#" id="i18n-link" title="English" class="ClobalItem">English</a>
            </div>
          </div>
        </div>
        <div class="footer-service">
          <span class="service-label">客服热线</span>
          <span class="service-num">400-788-3333</span>
          <a id="service-online" class="service-online" href="javascript:void(0);" title="在线客服">在线客服</a>
        </div>
        <div class="footer-outerLink">
          <a class="footer-sinaMblog" href="#" target="_blank"><i class="i_icon"></i></a>
          
          <a id="footer-weChat" class="footer-weChat" href="javascript:void(0);" target="_blank"><i class="i_icon"></i></a>
          <a class="footer-qzone" href="#" target="_blank"><i class="i_icon"></i></a>
        </div>
      </div>
      <div class="clear"></div>
      <div id="flymeCopyright" class="copyrightWrap">
        <div class="copyrightInner">
          <span>&copy;2017 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
          <a href="#" class="linkAGray" target="_blank">备案号: 粤ICP备13003602号-4</a>
          <a href="#" class="linkAGray" target="_blank">经营许可证编号: 粤B2-20130198</a>
          <a target="_blank" href="#" class="linkAGray">营业执照</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部区域 E -->
  
<script type="text/javascript">
  nLogin();

  // 绑定手机验证码事件
  $('.vcode-box .btn').click(function(){
    var btn = $(this)
    // 判断手机号是否正确
    if(nameOk){
      var p  = $('#account').val()
    
      // 发送ajax请求,让服务器给手机号发送 短信
      $.get('{% url "myhome_sendsms" %}',{phone:p},function(data){
          // 判断是否发送成功
          if(data['code'] == 0){
            // 找到button按钮,改变内容,并且60秒内不能在点击发送
            btn.html('60秒后重新发送')
            btn.attr('disabled',true)
            var num = 60
            // 启动定时器
            var init = setInterval(function(){
              num--
              btn.html(num+'秒后重新发送')
              if(num == 0){
                // 结束定时器,更改内容,更改属性
                clearInterval(init)
                btn.html('重新发送')
                btn.attr('disabled',false)
              }
            },1000)
          }else{
            // 发送失败
             alert('发送失败,尝试更换手机号或检查网络')
          }

      },'json')

    }else{
      // 手机号不正确
    }

  })
  
  // 点击注册 事件
  $('#nextStep').click(function(){

    // 触发表单中所有input的丧失焦点事件
    $('input').trigger('blur')

    // 检测手机和密码是否正确
    if(nameOk && passOk){
      $(this).parents('form').submit()  
    }

  })
</script>
</body>
</html>